<template>
  <!-- #ifdef H5 || APP-PLUS -->
  <view :class="[
      'zb-table',
      'zb-table-fixed-header',
      !border &&
        (bodyTableLeft > 50 || headerTableLeft > 50) &&
        'scroll-left-fixed'
    ]">
    <view class="zb-table-content" style="flex: 1">
      <view class="zb-table-scroll" style="height: 100%">
        <template v-if="showHeader">
          <view class="zb-table-header top-header-uni">
            <scroll-view class="zb-table-headers" @scroll="handleTableScrollLeft" scroll-x="true" scroll-y="false"
              id="tableHeaders" scroll-anchoring="true" :scroll-left="headerTableLeft" style="height: 100%">
              <view class="zb-table-fixed">
                <view class="zb-table-thead" style="position: relative">
                  <view class="item-tr">
                    <view @click.stop="sortAction(item, index)" class="item-th" :style="[
                        {
                          width: `${item.width ? item.width : '100'}px`,
                          flex: index === transColumns.length - 1 ? 1 : 'none',
                          minWidth: `${item.width ? item.width : '100'}px`,
                          borderRight: `${border ? '1px solid #e8e8e8' : ''}`,

                          borderTop: `${border ? '1px solid #e8e8e8' : ''}`,
                          textAlign: item.align || 'center'
                        },
                        getHeaderCellStyle(item, index)
                      ]" v-for="(item, index) in transColumns" :key="index">
                      <template v-if="item.type === 'selection'">
                        <view class="checkbox-item">
                          <tableCheckbox :indeterminate="indeterminate" :checked="checkedAll"
                            @checkboxSelected="checkboxSelectedAll"></tableCheckbox>
                        </view>
                      </template>
                      <template v-else>
                        <view style="padding: 0 6px" v-html="item.label"></view>
                        <view class="sorter-table" v-if="item.sorter">
                          <view :class="[
                              'sorter-table-icon',
                              item.sorterMode === '_asc' &&
                                `sorting${item.sorterMode || ''}`
                            ]"></view>
                          <view :class="[
                              'sorter-table-icon',
                              item.sorterMode === '_desc' &&
                                `sorting${item.sorterMode || ''}`
                            ]"></view>
                        </view>
                      </template>
                    </view>
                    <view v-if="scrollbarSize" class="item-th" :style="{
                        borderTop: `${border ? '1px solid #e8e8e8' : ''}`,
                        padding: 0,
                        width: `${scrollbarSize}px`
                      }">
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </template>
        <template v-if="!data.length">
          <view class="no-data">暂无数据~~</view>
        </template>
        <scroll-view class="zb-table-body" ref="tableBody" scroll-x="true" scroll-y="true" id="tableBody"
          :lower-threshold="40" :upper-threshold="10" @scrolltolower="scrolltolower"
          @scrolltoupper="(e) => debounce(scrollToLeft)(e)" @scroll="handleBodyScroll" :scroll-left="bodyTableLeft"
          :scroll-top="bodyScrollTop" :style="`height: calc(100% - ${showSummary ? 80 : 40}px)`">
          <view class="zb-table-fixed">
            <view class="zb-table-tbody">
              <view :class="[
                  'item-tr',
                  highlight && isHighlight(item, index) ? 'current-row' : ''
                ]" @click.stop="rowClick(item, index)" v-for="(item, index) in transData" :key="item.key">
                <view :style="[
                    {
                      width: `${ite.width ? ite.width : '100'}px`,
                      flex: i === transColumns.length - 1 ? 1 : 'none',
                      minWidth: `${ite.width ? ite.width : '100'}px`,
                      borderRight: `${border ? '1px solid #e8e8e8' : ''}`,
                      textAlign: ite.align || 'center'
                    },
                    cellStyle && getCellStyle(item, ite, index, i)
                  ]" @click="cellClick(item, index, ite)" :class="[
                    'item-td',
                    stripe ? (index % 2 != 0 ? 'odd' : 'even') : ''
                  ]" v-for="(ite, i) in transColumns" :key="i">
                  <template v-if="ite.type === 'icon'">
                    <image :src="item.collectionStatus ? activeCollectionIcon : collectionIcon"
                      style="width:20px;height:20px" @click="collectionData(item)"></image>
                  </template>
                  <template v-else-if="ite.type === 'operation'">
                    <view style="display: flex; align-items: center; height: 100%">
                      <view v-for="(ren, ind) in permission(
                          item,
                          ite.renders,
                          index
                        )" :key="ind" @click.stop="$emit(ren.func, item.id)" :style="{
                          display: 'flex',
                          alignItems: 'center',
                          marginRight: ite.renders.length > 1 ? '8px' : '0'
                        }">
                        <template v-if="ren.type === 'custom'">
                          <view :class="ren.class || ''" style="cursor: pointer">
                            {{ ren.name }}
                          </view>
                        </template>
                        <template v-else>
                          <button :class="ren.class || ''" :type="ren.type || 'primary'" :size="ren.size || 'mini'">
                            {{ ren.name }}
                          </button>
                        </template>
                      </view>
                    </view>
                  </template>
                  <template v-else-if="ite.type === 'selection'">
                    <view class="checkbox-item">
                      <tableCheckbox @checkboxSelected="(e) => checkboxSelected(e, item)" :cellData="item"
                        :checked="item.checked" />
                    </view>
                  </template>
                  <template v-else-if="ite.type === 'index'">
                    {{ index + 1 }}
                  </template>
                  <template v-else-if="ite.type === 'img'">
                    <view class="checkbox-item">
                      <template v-if="item[ite.name]">
                        <image @click.stop="
                            previewImage(item, item[ite.name], iImage)
                          " v-for="(iImageTem, iImage) in imgs(item[ite.name])" :show-menu-by-longpress="false"
                          :key="iImage" :src="iImageTem" style="width: 40px; height: 30px" mode="aspectFit"></image>
                      </template>
                      <text v-else>{{ ite.emptyString }}</text>
                    </view>
                  </template>
                  <template v-else-if="ite.type === 'custom'">
                    <view v-if="ite.name === 'assayReport'">
                      <view v-if="item[ite.name]" @click="clickImg(item[ite.name])" style="color: #409eff">
                        查看
                      </view>
                      <view v-else>--</view>
                    </view>
                    <view v-if="ite.name === 'phone'">
                      <view @click="gotoPhone()" style="color: #409eff">
                        查看
                      </view>
                    </view>
                  </template>
                  <template v-else>
                    {{
                    ite.filters
                    ? itemFilter(item, ite)
                    : formatterAction(item, ite, index, i)
                    }}
                  </template>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <table-h5-summary :scrollbarSize="scrollbarSize" :data="data"
          :handleFooterTableScrollLeft="handleFooterTableScrollLeft" :headerFooterTableLeft="headerFooterTableLeft"
          v-if="showSummary" :showSummary="showSummary" :transColumns="transColumns" :border="border"
          :summary-method="summaryMethod" :sumText="sumText" :fixedLeftColumns="fixedLeftColumns" />
      </view>
      <view class="zb-table-fixed-left" v-if="isFixedLeft" :style="{ height: `calc(100% - ${scrollbarSize}px)` }">
        <template v-if="showHeader">
          <view class="zb-table-header" style="display: flex">
            <view class="item-tr" style="" @click.stop="rowClick(item, index)" v-for="(item, index) in fixedLeftColumns"
              :key="index">
              <view :style="{
                  width: `${item.width ? item.width : '100'}px`,
                  borderRight: `${border ? '1px solid #e8e8e8' : ''}`,
                  borderTop: `${border ? '1px solid #e8e8e8' : ''}`,
                  textAlign: item.align || 'center'
                }" @click.stop="sortAction(item, index)" class="item-th">
                <template v-if="item.type === 'selection'">
                  <view class="checkbox-item">
                    <tableCheckbox :indeterminate="indeterminate" :checked="checkedAll"
                      @checkboxSelected="checkboxSelectedAll"></tableCheckbox>
                  </view>
                </template>
                <template v-else>
                  <view style="padding: 0 6px" v-html="item.label"></view>
                  <view class="sorter-table" v-if="item.sorter">
                    <view :class="[
                        'sorter-table-icon',
                        item.sorterMode === '_asc' &&
                          `sorting${item.sorterMode || ''}`
                      ]"></view>
                    <view :class="[
                        'sorter-table-icon',
                        item.sorterMode === '_desc' &&
                          `sorting${item.sorterMode || ''}`
                      ]"></view>
                  </view>
                </template>
              </view>
            </view>
          </view>
        </template>
        <scroll-view scroll-y="true" id="leftTableFixed" :upper-threshold="15"
          @scrolltoupper="(e) => scrollToFixedLeft(e)" @scroll="leftFixedScrollAction" :scroll-top="leftFiexScrollTop"
          class="zb-table-body-inner" :style="`height: calc(100% - ${showSummary ? 80 : 40}px)`">
          <view class="zb-table-fixed">
            <view class="zb-table-tbody">
              <view :class="[
                  'item-tr',
                  stripe ? (i % 2 != 0 ? 'odd' : 'even') : '',
                  highlight && isHighlight(ite, i) ? 'current-row' : ''
                ]" v-for="(ite, i) in transData" @click.stop="rowClick(ite, i)" :key="ite.key" style="">
                <view class="item-td" @click="cellClick(ite, index, item)" :style="[
                    {
                      width: `${item.width ? item.width : '100'}px`,
                      borderRight: `${border ? '1px solid #e8e8e8' : ''}`,
                      textAlign: item.align || 'center'
                    },
                    cellStyle && getCellStyle(ite, item, i, index)
                  ]" :key="index" v-for="(item, index) in fixedLeftColumns">
                  <template v-if="item.type === 'selection'">
                    <view class="checkbox-item">
                      <tableCheckbox @checkboxSelected="(e) => checkboxSelected(e, ite)" :cellData="ite"
                        :checked="ite.checked" />
                    </view>
                  </template>
                  <template v-else-if="item.type === 'index'">
                    {{ i + 1 }}
                  </template>
                  <template v-else>
                    {{ ite[item.name] || item.emptyString }}
                  </template>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <table-side-summary :scrollbarSize="scrollbarSize" v-if="showSummary && !(scrollbarSize > 0)" :data="data"
          :showSummary="showSummary" :transColumns="transColumns" :border="border" :summary-method="summaryMethod"
          :sumText="sumText" :fixedLeftColumns="fixedLeftColumns" />
      </view>
    </view>
    <zb-load-more v-if="isLoadMore && !completeLoading" />
  </view>
  <!-- #endif -->
  <!-- #ifndef H5 || APP-PLUS -->
  <view class="zb-table-applet">
    <view class="zb-table-content" style="white-space: nowrap">
      <scroll-view <!-- #ifdef MP-ALIPAY -->
        @scroll="scrollAlipay"
        <!-- #endif  -->

        @scrolltolower="scrolltolower"
        <!-- #ifdef MP-ALIPAY -->
        style=" height: 100%;overflow-x:scroll"
        <!-- #endif  -->
        <!-- #ifndef MP-ALIPAY -->
        style=" height: 100%"
        <!-- #endif  -->
        scroll-y="true" scroll-x="true">
        <view class="zb-table-scroll">
          <template v-if="showHeader">
            <view class="zb-table-header top-header-uni" style="">
              <view class="zb-table-fixed">
                <view class="zb-table-thead" style="position: relative">
                  <view class="item-tr">
                    <view @click.stop="sortAction(item, index)" :class="[
                        'item-th',
                        index < fixedLeftColumns.length && 'zb-stick-side'
                      ]" :style="{
                        left: `${item.left}px`,
                        width: `${item.width ? item.width : '100'}px`,
                        flex: index === transColumns.length - 1 ? 1 : 'none',
                        minWidth: `${item.width ? item.width : '100'}px`,
                        borderRight: `${border ? '1px solid #e8e8e8' : ''}`,
                        borderTop: `${border ? '1px solid #e8e8e8' : ''}`,
                        textAlign: item.align || 'center'
                      }" v-for="(item, index) in transColumns" :key="index">
                      <template v-if="item.type === 'selection'">
                        <view class="checkbox-item">
                          <tableCheckbox :indeterminate="indeterminate" :checked="checkedAll"
                            @checkboxSelected="checkboxSelectedAll"></tableCheckbox>
                        </view>
                      </template>
                      <template v-else>
                        <view style="padding: 0 6px" v-html="item.label"></view>
                        <view class="sorter-table" v-if="item.sorter">
                          <view :class="[
                              'sorter-table-icon',
                              item.sorterMode === '_asc' &&
                                `sorting${item.sorterMode || ''}`
                            ]"></view>
                          <view :class="[
                              'sorter-table-icon',
                              item.sorterMode === '_desc' &&
                                `sorting${item.sorterMode || ''}`
                            ]"></view>
                        </view>
                      </template>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template v-if="!data.length">
            <view class="no-data">暂无数据~~</view>
          </template>
          <view class="zb-table-fixed">
            <view class="zb-table-tbody">
              <view :class="[
                  'item-tr',
                  highlight && isHighlight(item, index) ? 'current-row' : ''
                ]" @click.stop="rowClick(item, index)" v-for="(item, index) in transData" :key="item.key">
                <view :style="[
                    {
                      left: `${ite.left}px`,
                      width: `${ite.width ? ite.width : '100'}px`,
                      flex: i === transColumns.length - 1 ? 1 : 'none',
                      minWidth: `${ite.width ? ite.width : '100'}px`,
                      borderRight: `${border ? '1px solid #e8e8e8' : ''}`,
                      textAlign: ite.align || 'center'
                    },
                    getCellStyle(item, ite, index, i)
                  ]" @click="cellClick(item, index, ite)" :class="[
                    'item-td',
                    i < fixedLeftColumns.length && 'zb-stick-side',
                    stripe ? (index % 2 != 0 ? 'odd' : 'even') : ''
                  ]" v-for="(ite, i) in transColumns" :key="i">
                  <template v-if="ite.type === 'icon'">
                    <image :src="item.collectionStatus ? activeCollectionIcon : collectionIcon"
                      style="width:20px;height:20px" @click="collectionData(item)"></image>
                  </template>
                  <template v-else-if="ite.type === 'operation'">
                    <view style="display: flex; align-items: center; height: 100%">
                      <view v-for="(ren, ind) in permission(
                          item,
                          ite.renders,
                          index
                        )" :key="ind" @click.stop="$emit(ren.func, item.id)" :style="{
                          display: 'flex',
                          alignItems: 'center',
                          marginRight: ite.renders.length > 1 ? '8px' : '0'
                        }">
                        <template v-if="ren.type === 'custom'">
                          <view :class="ren.class || ''" style="cursor: pointer">
                            {{ ren.name }}
                          </view>
                        </template>
                        <template v-else>
                          <button :class="ren.class || ''" :type="ren.type || 'primary'" :size="ren.size || 'mini'">
                            {{ ren.name }}
                          </button>
                        </template>
                      </view>
                    </view>
                  </template>
                  <template v-else-if="ite.type === 'selection'">
                    <view class="checkbox-item">
                      <tableCheckbox @checkboxSelected="(e) => checkboxSelected(e, item)" :cellData="item"
                        :checked="item.checked" />
                    </view>
                  </template>
                  <template v-else-if="ite.type === 'img'">
                    <template v-if="item[ite.name]">
                      <view class="checkbox-item" @click.stop>
                        <image @click.stop="
                            previewImage(iImageTem, item[ite.name], iImage)
                          " v-for="(iImageTem, iImage) in imgs(item[ite.name])" :show-menu-by-longpress="false"
                          :key="iImage" :src="iImageTem" style="width: 40px; height: 30px" mode="aspectFit"></image>
                      </view>
                    </template>
                    <text v-else>{{ ite.emptyString }}</text>
                  </template>
                  <template v-else-if="ite.type === 'index'">
                    {{ index + 1 }}
                  </template>
                  <template v-else-if="ite.type === 'custom'">
                    <view v-if="ite.name === 'assayReport'">
                      <view v-if="item[ite.name]" @click="clickImg(item[ite.name])" style="color: #409eff">
                        查看
                      </view>
                      <view v-else>--</view>
                    </view>
                    <view v-if="ite.name === 'phone'">
                      <view @click="gotoPhone()" style="color: #409eff">
                        查看
                      </view>
                    </view>
                  </template>
                  <template v-else>
                    {{
                    ite.filters
                    ? itemFilter(item, ite)
                    : formatterAction(item, ite, index, i)
                    }}
                  </template>
                </view>
              </view>
            </view>
          </view>
          <table-summary v-if="showSummary" :data="data" :showSummary="showSummary" :fixedLeftColumns="fixedLeftColumns"
            :transColumns="transColumns" :border="border" :summary-method="summaryMethod" :sumText="sumText" />
        </view>
      </scroll-view>
    </view>
    <zb-load-more v-if="isLoadMore && !completeLoading" />
  </view>
  <!-- #endif -->
</template>
<script>
  import config from '@/config';
  import TableCheckbox from './components/table-checkbox.vue';
  import TableSummary from './components/table-summary.vue';
  import TableSideSummary from './components/table-side-summary.vue';
  import TableH5Summary from './components/table-h5-summary';
  import ZbLoadMore from './components/zb-load-more';


  // #ifdef H5
  import { getScrollbarSize } from './js/util';
  // #endif

  export default {
    components: {
      TableCheckbox,
      TableSummary,
      TableSideSummary,
      TableH5Summary,
      ZbLoadMore
    },
    props: {
      highlight: {
        type: Boolean,
        default: false
      },
      itemDate: {
        type: Object,
        default: () => { }
      },
      columns: {
        type: Array,
        default: () => []
      },
      showSummary: {
        type: Boolean,
        default: false
      },
      isShowLoadMore: {
        type: Boolean,
        default: false
      },
      data: {
        type: Array,
        default: () => []
      },
      sumText: {
        type: String,
        default: '合计'
      },
      showHeader: {
        type: Boolean,
        default: true
      },
      border: {
        type: Boolean,
        default: false
      },
      stripe: {
        type: Boolean,
        default: true
      },
      fit: {
        type: Boolean,
        default: false
      },
      isMore: {
        type: String,
        default: 'more'
      },
      pullNo: {
        type: Number,
        default: 1
      },
      rowKey: [String, Function],
      summaryMethod: Function,
      pullUpLoading: Function,
      formatter: Function,
      cellStyle: Function,
      cellHeaderStyle: Function,
      permissionBtn: Function
    },
    watch: {
      pullNo() {
        this.isLoadMore = false;
      },
      isMore(value) {
        if (value === 'noMore') {
          this.completeLoading = true;
        }
      }
    },
    computed: {
      collectionIcon() {
        return config.baseImgUrl + '/collection.png';
      },
      activeCollectionIcon() {
        return config.baseImgUrl + '/active-collection.png';
      },
      availableColumns() {
        return this.columns.filter((e) => !e.hidden);
      },
      loadMoreHeight() {
        return this.isLoadMore ? 40 : 0;
      },
      activeIcon() {
        return ''
      },
      activeIcon() {
        return ''
      },
      fixedLeftColumns() {
        let arr = [];
        const columns = this.availableColumns.sort((a, b) => {
          return Number(b.fixed || false) - Number(a.fixed || false);
        });
        for (let i = 0; i < columns.length; i++) {
          let item = columns[i];
          if (item.fixed) {
            arr.push(item);
          } else {
            break;
          }
        }
        return arr;
      },
      imgs() {
        return (item) => {
          return typeof item === 'string' ? [item] : item;
        };
      },
      itemfilters() {
        return (item, ite) => {
          if (item[ite.name] == null) {
            return ite.emptyString;
          }
          return item[ite.name];
        };
      },
      scrollbarSize() {
        // #ifdef H5
        return getScrollbarSize();
        // #endif

        // #ifndef H5
        return 0;
        // #endif
      },
      isFixedLeft() {
        if (!this.availableColumns.length) {
          return false;
        }
        if (!this.data.length) {
          return false;
        }
        let [firstArr] = this.availableColumns;
        return !!firstArr.fixed;
      },
      transColumns() {
        if (this.fit) {
          this.availableColumns.forEach((column) => {
            if (!item.label.includes('<br />(') && item.label.includes('(')) {
              item.label = item.label.replace('(', '<br />(');
            }
            if (column.type === 'operation' && column.renders) {
              let str = '';
              column.renders.map((item) => {
                str += item.name;
              });
              column.width = this.getTextWidth(str) + column.renders.length * 40;
            } else if (column.type === 'img') {
            } else if (column.type === 'selection') {
            } else {
              let arr = [this.getTextWidth(column.label)];
              this.data.forEach((data) => {
                let str = data[column.name] + '';
                if (str === 'undefined') {
                  arr.push(30);
                } else {
                  let width = this.getTextWidth(str);
                  arr.push(width);
                }
              });
              column.width = Math.max(...arr) + 20;
            }
          });
        }
        let number = 0;
        this.availableColumns.forEach((item, index) => {
          if (!item.label.includes('<br />(') && item.label.includes('(')) {
            item.label = item.label.replace('(', '<br />(');
          }
          if (item.type === 'operation' && item.renders && !item.width) {
            let str = '';
            item.renders.map((item) => {
              str += item.name;
            });
            item.width = this.getTextWidth(str) + item.renders.length * 40;
          }
          if (item.type === 'img') {
            if (!item.width) {
              let arr = [];
              let widImg = this.getTextWidth(item.label);
              this.data.forEach((data) => {
                if (data[item.name]) {
                  let urls =
                    typeof data[item.name] === 'string'
                      ? [data[item.name]]
                      : data[item.name];
                  arr.push(urls.length);
                }
                item.width = Math.max(...arr) * 40 + widImg;
              });
            }
          }
          if (item.fixed) {
            if (index === 0) {
              item.left = 0;
              number += item.width;
            } else {
              item.left = number;
              number += item.width;
            }
          }
          item.emptyString = item.emptyString || '--';
        });
        return this.availableColumns;
      },
      transData() {
        let flag = this.availableColumns.some(
          (item) => item.type === 'selection'
        );
        this.data.forEach((item, index) => {
          if (flag) {
            if (item.checked) {
              if (!this.selectArr.length) {
                this.selectArr.push(item);
              }
            }
          }
          if (this.rowKey) {
            if (typeof this.rowKey === 'function') {
              item.key = Object.freeze(this.rowKey(item)) || Date.now();
            } else {
              item.key = Object.freeze(item[this.rowKey]) || Date.now();
            }
          } else {
            item.key = index;
          }
        });
        if (flag) {
          if (this.data.length) {
            let le = this.data.filter((item) => item.checked).length;
            if (le) {
              if (le === this.data.length) {
                this.checkedAll = true;
              } else {
                this.indeterminate = true;
              }
            } else {
              this.checkedAll = false;
              this.indeterminate = false;
              this.selectArr = [];
            }
          } else {
            this.checkedAll = false;
            this.indeterminate = false;
            this.selectArr = [];
          }
        }
        return this.data;
      },
      isHighlight() {
        return (item, index) => {
          if (this.rowKey) {
            return item.key === this.currentRow['key'];
          } else {
            return index === this.currentRowIndex;
          }
        };
      },
      getHeaderCellStyle() {
        return (column, columnIndex, childIndex) => {
          const cellStyle = this.cellHeaderStyle;
          if (typeof cellStyle === 'function') {
            return cellStyle({ column, columnIndex });
          }
          return {};
        };
      },
      getCellStyle() {
        return (row, column, rowIndex, columnIndex) => {
          const cellStyle = this.cellStyle;
          if (typeof cellStyle === 'function') {
            return cellStyle({ row, column, rowIndex, columnIndex });
          }
          return {};
        };
      }
    },
    data() {
      return {
        button: [],
        alipayScrollTop: 0,
        alipayScrollOldTop: 0,
        alipayFlag: false,
        bodyTableLeft: 0,
        headerTableLeft: 0,
        lastScrollLeft: 0,
        isLoadMore: false,
        headerFooterTableLeft: 0,
        leftFiexScrollTop: 0,
        bodyScrollTop: 0,
        currentDriver: null,
        currentDriver1: null,
        bodyTime: null,
        currentRowIndex: null,
        currentRow: {},
        bodyTime1: null,
        headerTime: null,
        debounceTime: null,
        operation: {},
        completedFlag: false,
        selectArr: [],
        indeterminate: false,
        checkedAll: false,
        completeLoading: false,
        aliTime: null,
        collectionValue: undefined
      };
    },
    beforeDestroy() {
      this.aliTime && clearTimeout(this.aliTime);
      this.debounceTime && clearTimeout(this.debounceTime);
      this.bodyTime1 && clearTimeout(this.bodyTime1);
      this.bodyTime && clearTimeout(this.bodyTime);
      this.selectArr = [];
      this.indeterminate = false;
      this.checkedAll = false;
    },
    methods: {
      collectionData(row) {
        this.$emit('collectionStatusChange', row)
      },
      clearSelection() {
        this.transData.forEach((item) => {
          item.checked = false;
        });
        this.selectArr = [];
        this.indeterminate = false;
        this.checkedAll = false;
      },
      formatterAction(row, column, rowIndex, columnIndex) {
        if (column.formatter && typeof this.formatter === 'function') {
          return this.formatter(row, column, rowIndex, columnIndex);
        }
        return row[column.name] == null || row[column.name] === ''
          ? column.emptyString
          : row[column.name];
      },
      permission(item, renders, index) {
        if (this.permissionBtn && typeof this.permissionBtn === 'function') {
          return this.permissionBtn(item, renders, index);
        }
        return renders;
      },
      pullUpCompleteLoading(type) {
        this.isLoadMore = false;
        if (type === 'ok') {
          this.completeLoading = true;
        }
      },
      scrollAlipay(e) {
        if (!this.alipayScrollOldTop) {
          this.alipayScrollOldTop = e.detail.scrollTop;
        }
        this.aliTime && clearTimeout(this.aliTime);
        this.aliTime = setTimeout(() => {
          if (this.alipayFlag && e.detail.scrollTop > this.alipayScrollOldTop) {
            this.pullLoad();
          }
          this.alipayFlag = false;
          this.alipayScrollOldTop = null;
        }, 500);
      },
      pullLoad() {
        if (this.isShowLoadMore) {
          this.isLoadMore = true;
          this.$emit('pullUpLoading');
        }
      },
      scrolltolower(e) {
        this.alipayFlag = true;
        if (e.detail.direction === 'bottom') {
          this.pullLoad();
        }
      },
      previewImage(item, url, current) {
        let urls = typeof url === 'string' ? [url] : url;
        uni.previewImage({
          current,
          urls: urls
        });
      },
      resetHighlight() {
        this.currentRowIndex = null;
        this.currentRow = {};
      },
      cellClick(row, index, column) {
        this.$emit('cellClick', row, index, column);
      },
      rowClick(row, index) {
        if (this.highlight) {
          this.currentRowIndex = index;
          this.currentRow = row;
          this.$emit('currentChange', row, index);
        }
        this.$emit('rowClick', row, index);
      },
      checkboxSelectedAll(e) {
        this.indeterminate = false;
        if (e.checked) {
          this.selectArr = [];
          this.checkedAll = true;
          this.data.forEach((item) => {
            // this.$set(item,'checked',true)
            item.checked = true;
            this.selectArr.push(item);
          });
        } else {
          this.checkedAll = false;
          this.data.forEach((item) => {
            this.$set(item, 'checked', false);
          });
          this.selectArr = [];
        }
        // #ifndef H5 || APP-PLUS
        this.$forceUpdate();
        // #endif
        this.$emit('toggleAllSelection', e.checked, this.selectArr);
      },
      checkboxSelected(e, item) {
        // #ifdef H5 || APP-PLUS
        this.$set(item, 'checked', e.checked);
        // #endif
        // #ifndef H5 || APP-PLUS
        this.data.forEach((item) => {
          if (item.key === e.data.key) {
            item.checked = e.checked;
          }
        });
        // #endif
        item.checked = e.checked;
        e.data.checked = e.checked;
        if (e.checked) {
          this.selectArr.push(e.data);
        } else {
          this.selectArr = this.selectArr.filter(
            (item) => item.key !== e.data.key
          );
        }
        if (this.selectArr.length === this.transData.length) {
          this.indeterminate = false;
          this.checkedAll = true;
        } else {
          this.indeterminate = true;
          this.checkedAll = false;
        }
        if (!this.selectArr.length) {
          this.checkedAll = false;
          this.indeterminate = false;
        }
        // #ifndef H5 || APP-PLUS
        this.$forceUpdate();
        // #endif
        this.$emit('toggleRowSelection', e.checked, this.selectArr);
      },
      itemFilter(item, ite) {
        if (ite.filters && ite.name) {
          let key = item[ite.name];
          return ite.filters[key] || '';
        }
        return item[ite.name] || ite.emptyString;
      },
      // 默认字体为微软雅黑 Microsoft YaHei,字体大小为 14px
      getTextWidth(str) {
        if (str.length < 3) {
          return 40;
        }
        let regx = /^[0-9]+.?[0-9]*$/;
        let flexWidth = 0;
        for (const char of str) {
          if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
            // 如果是英文字符，为字符分配8个单位宽度
            flexWidth += 10;
          } else if (char >= '\u4e00' && char <= '\u9fa5') {
            // 如果是中文字符，为字符分配15个单位宽度
            flexWidth += 15;
          } else if (regx.test(char)) {
            flexWidth += 9;
          } else {
            // 其他种类字符，为字符分配8个单位宽度
            flexWidth += 7;
          }
        }
        return flexWidth;
      },
      width(item) {
        return `${item.width ? item.width : '100'}px`;
      },
      showStripe(index) {
        if (this.currentDriver) return;
        if (this.stripe) {
          return index % 2 != 0 ? 'odd' : 'even';
        } else {
          return '';
        }
      },
      clickImg(data) {
        uni.previewImage({
          urls: [data]
        });
      },
      gotoPhone() {
        uni.showModal({
          title: '联系煤源',
          content: '您确认联系煤源XXXX吗?',
          labelColor: '#ffffff',
          cancelText: '取消',
          confirmText: '确认',
          showCancel: true,
          confirmColor: '#409eff',
          cancelColor: '#999999',
          success(res) {
            if (res.confirm) {
              uni.makePhoneCall({
                phoneNumber: '18681905606'
              });
            }
          }
        });
      },
      //验证字符串是否是数字
      checkNumber(theObj) {
        var reg = /^[0-9]+.?[0-9]*$/;
        if (reg.test(theObj)) {
          return true;
        }
        return false;
      },
      isDate(data) {
        if (isNaN(data) && !isNaN(Date.parse(data))) {
          return true;
        }
        return false;
      },
      sortAction(item) {
        if (!item.sorter) {
          return false;
        }
        for (let i = 0; i < this.availableColumns.length; i++) {
          if (this.availableColumns[i].name !== item.name) {
            delete this.availableColumns[i].sorterMode;
          }
        }
        if (!item.sorterMode) {
          this.$set(item, 'sorterMode', '_asc');
          this.$emit('sort-change', item.name, item.sorterMode.replace('_', ''));
          this.$forceUpdate();
          return;
        }
        if (item.sorterMode === '_asc') {
          this.$set(item, 'sorterMode', '_desc');
          this.$emit('sort-change', item.name, item.sorterMode.replace('_', ''));
          this.$forceUpdate();
          return;
        }
        if (item.sorterMode === '_desc') {
          this.$set(item, 'sorterMode', undefined);
          this.$emit('sort-change', undefined, undefined);
          this.$forceUpdate();
          return;
        }
        // this.$set(
        //   item,
        //   'sorterMode',
        //   item.sorterMode === '_asc' ? '_desc' : '_asc'
        // );

        // if (item.sorter === 'custom') {
        //   this.$emit(
        //     'sort-change',
        //     item,
        //     item.sorterMode.replace('_', ''),
        //     index
        //   );
        // } else {
        //   this.sortData(item);
        // }
        // #ifndef H5 || APP-PLUS
        // #endif
      },
      sortData(item) {
        let key = item.name;

        if (item.sorterMode === '_asc') {
          this.data.sort((a, b) => {
            if (this.checkNumber(a[key])) {
              return a[key] - b[key];
            }
            if (this.isDate(a[key])) {
              let a1 = new Date(a[key]).getTime();
              let b1 = new Date(b[key]).getTime();
              return a1 - b1;
            }
          });
        } else {
          this.data.sort((a, b) => {
            if (this.checkNumber(a[key])) {
              return b[key] - a[key];
            }
            if (this.isDate(a[key])) {
              let a1 = new Date(a[key]).getTime();
              let b1 = new Date(b[key]).getTime();
              return b1 - a1;
            }
          });
        }
      },
      throttle(method, delay = 60) {
        let time = null;
        return (...args) => {
          if (!time) {
            time = setTimeout(() => {
              method(...args);
              time = null;
            }, delay);
          }
        };
      },
      debounce(method, delay = 1000) {
        return (...args) => {
          this.debounceTime && clearTimeout(this.debounceTime);
          this.debounceTime = setTimeout(() => {
            method(...args);
          }, delay);
        };
      },
      handleBodyScroll(e) {
        if (this.currentDriver && this.currentDriver !== e.currentTarget.id)
          return;
        this.currentDriver = e.currentTarget.id;
        this.headerTableLeft = e.detail.scrollLeft;
        this.headerFooterTableLeft = e.detail.scrollLeft;
        this.leftFiexScrollTop = e.detail.scrollTop;
        this.bodyTime && clearTimeout(this.bodyTime);
        this.bodyTime = setTimeout(() => {
          this.currentDriver = null;
        }, 200);
      },
      leftFixedScrollAction(e) {
        if (this.currentDriver && this.currentDriver !== e.currentTarget.id)
          return;
        this.currentDriver = e.currentTarget.id;
        this.bodyScrollTop = e.detail.scrollTop;
        this.bodyTime && clearTimeout(this.bodyTime);
        this.bodyTime = setTimeout(() => {
          this.currentDriver = null;
        }, 200);
      },
      scrollToLeft(e) {
        if (this.currentDriver1 && this.currentDriver1 !== e.currentTarget.id)
          return;
        this.currentDriver1 = e.currentTarget.id;
        if (e.detail.direction === 'left' && this.headerTableLeft < 10) {
          this.headerTableLeft = 0;
        } else if (e.detail.direction === 'top' && this.leftFiexScrollTop < 10) {
          this.leftFiexScrollTop = 0;
        }
        this.bodyTime && clearTimeout(this.bodyTime);
        this.bodyTime = setTimeout(() => {
          this.currentDriver1 = null;
        }, 200);
      },
      scrollToFixedLeft(e) {
        if (this.currentDriver1 && this.currentDriver1 !== e.currentTarget.id)
          return;
        this.currentDriver1 = e.currentTarget.id;
        if (e.detail.direction === 'top' && this.bodyScrollTop < 10) {
          this.bodyScrollTop = 0;
        }
        this.bodyTime && clearTimeout(this.bodyTime);
        this.bodyTime = setTimeout(() => {
          this.currentDriver1 = null;
        }, 200);
      },
      handleTableScrollLeft(e, type) {
        if (this.currentDriver && this.currentDriver !== e.currentTarget.id)
          return;
        this.currentDriver = e.currentTarget.id;
        this.bodyTableLeft = e.detail.scrollLeft;
        this.headerFooterTableLeft = e.detail.scrollLeft;
        this.bodyTime && clearTimeout(this.bodyTime);
        this.bodyTime = setTimeout(() => {
          this.currentDriver = null;
        }, 200);
      },
      handleFooterTableScrollLeft(e) {
        if (this.currentDriver && this.currentDriver !== e.currentTarget.id)
          return;
        this.currentDriver = e.currentTarget.id;
        this.bodyTableLeft = e.detail.scrollLeft;
        this.headerTableLeft = e.detail.scrollLeft;
        this.bodyTime && clearTimeout(this.bodyTime);
        this.bodyTime = setTimeout(() => {
          this.currentDriver = null;
        }, 200);
      }
    }
  };
</script>
<style lang="scss">
  .zb-table-fixed-left {

    /*去除左边滚动条 */
    scroll-view ::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      background: transparent;
    }
  }

  .zb-table-header {

    ///*去除头部滚动条 */
    scroll-view ::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      background: transparent;
    }
  }
</style>
<style lang="scss" scoped>
  .sorter-table {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);

    .sorter-table-icon {
      width: 0;
      height: 0;
      color: #dcdcdc;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
    }

    .sorter-table-icon:first-child {
      border-bottom: 5px solid currentColor;
    }

    .sorter-table-icon:last-child {
      margin-top: 1.5px;
      border-top: 5px solid currentColor;
    }

    .sorting_desc {
      color: #2979ff;
    }

    .sorting_asc {
      color: #2979ff;
    }
  }

  .checkbox-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .no-data {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
  }

  .item-th {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e8e8e8;
    transition: background 0.3s;
    padding: 8px 10px;
    word-break: normal;
    /* 不换行 */
    white-space: normal;
    /* 不换行 */
  }

  .zb-table {
    height: 100%;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    position: relative;

    .zb-table-content {
      position: relative;
      overflow: hidden;
    }

    .zb-table-fixed {
      min-width: 100%;
    }

    .zb-table-body {
      position: relative;
      background: #fff;
      transition: opacity 0.3s;
    }

    .item-tr {
      display: flex;
    }

    .item-td {
      flex-shrink: 0;
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 8px 10px;
      box-sizing: border-box;
      word-break: normal;
      /* 不换行 */
      white-space: normal;
      /* 不换行 */
      overflow-wrap: normal;
      border-bottom: 1px solid #e8e8e8;
    }

    .zb-table-fixed-left .zb-table-header {
      overflow-y: hidden;
    }

    .zb-table-header {
      overflow: hidden;
      background: #fafafa;

      .item-th {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        box-sizing: border-box;
      }
    }

    .zb-table-fixed-left .zb-table-fixed {
      background: #fff;
    }

    .zb-table-fixed-right .zb-table-fixed {
      background: #fff;
    }

    .zb-table-body-inner {
      height: 100%;
    }

    .zb-table-fixed-left {
      position: absolute;
      top: 0;
      z-index: 1;
      overflow: hidden;
      border-radius: 0;
      height: 100%;
    }

    .odd {
      background-color: #F8F9FC;
      width: 100%;
    }

    .even {
      background-color: white;
      width: 100%;
    }
  }

  .scroll-left-fixed {
    .zb-table-fixed-left {
      left: 0;
      box-shadow: 6px 0 6px -4px #ccc;
    }
  }

  .zb-table-applet {
    height: 93%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 12px;

    .zb-table-content {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .zb-table-fixed {
      min-width: 100%;
      width: fit-content;
    }

    .zb-table-body {
      position: relative;
      background: #fff;
      transition: opacity 0.3s;
    }

    .item-tr {
      display: flex;
    }

    .item-td {
      flex-shrink: 0;
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 10px;
      box-sizing: border-box;
      word-break: normal;
      white-space: normal;
      border-bottom: 1px solid #e8e8e8;
    }

    .zb-table-header {
      position: sticky;
      top: 0;
      z-index: 2;

      .item-th {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fafafa;
      }

      .zb-stick-side {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 2;
        box-sizing: border-box;
        background: #fafafa;
      }
    }

    .zb-table-fixed-left .zb-table-fixed {
      background: #fff;
    }

    .zb-table-fixed-right .zb-table-fixed {
      background: #fff;
    }

    .zb-table-fixed-header .zb-table-body-inner {
      height: 100%;
    }

    .zb-table-fixed-left {
      position: absolute;
      top: 0;
      z-index: 1;
      overflow: hidden;
      border-radius: 0;
      height: 100%;
    }

    .scroll-left-fixed {
      .zb-table-fixed-left {
        left: 0;
        box-shadow: 6px 0 6px -4px #ccc;
      }
    }

    .odd {
      background-color: #F8F9FC;
      width: 100%;
    }

    .even {
      background-color: white;
      width: 100%;
    }

    .zb-table-tbody {
      .zb-stick-side {
        position: sticky;
        left: 0;
        z-index: 1;
        box-sizing: border-box;
        background: white;
      }

      .odd {
        background: #f9f9f9;
        width: 100%;
      }

      .even {
        background: white;
        width: 100%;
      }
    }

    .current-row {
      .item-td {
        background-color: #ecf5ff;
      }
    }
  }

  .current-row {
    .item-td {
      background-color: #ecf5ff;
    }
  }

  .scrollPosition {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: red;
    z-index: 999;
  }
</style>